import Home from "./components/Home.jsx";
import Page1 from "./components/page1.jsx";
import Page2 from "./components/page2.jsx";
import Page2Son from "./components/Son/page2Son.jsx";
import { Routes, Route, Link, Navigate } from "react-router-dom";
function App() {
  return (
    <div>
      <h1>我是app -利用jsx语法创建路由</h1>
      <Routes>
        <Route path="/zks" element={<Home />}></Route>
        <Route path="/page1" Component={Page1}></Route>
        <Route path="/page2" element={<Page2 />}>
          <Route path="/page2/:id" element={<Page2Son />}></Route>
        </Route>
        {/* 简单重定向 */}
        <Route path="/" element={<Navigate to="/zks" />} />
        <Route path="*" element={<div>404NOT Found</div>} />
      </Routes>
      <Link to={"/page1?name=zks&age=18"} style={{ margin: "20px " }}>
        调转到page1并获取参数
      </Link>
      <Link to={"/page2/456"} style={{ margin: "20px" }}>
        调转到page2并获取参数
      </Link>

      <p className="text-red-500">tailwindcss</p>
    </div>
  );
}

export default App;
